<!--
 * @Date: 2020-08-08 11:17:34
 * @LastEditors: 舟玉成
 * @写好代码的烂程序员: ↑
 * @LastEditTime: 2020-08-08 17:18:06
-->
<template>
  <div class="recommend">
    <!-- <div class="wapper">

    </div> -->
    <!-- <div class="lunbo" :style="{'background':'url('+item.imageUrl+')'}"> -->
    <div class="lunbo">
      <div
        class="ZMD1"
        style="position: relative;"
      >
        <template>
          <el-carousel
            indicator-position="none"
            :interval="5000"
            arrow="always"
            @change="LBTchange"
          >
            <el-carousel-item
              v-for="item in banners"
              :key="item.id"
            >
              <img
                :src="item.imageUrl"
                alt=""
                style="width:100%;height:150%;filter: blur(30px);"
              >
            </el-carousel-item>
          </el-carousel>
        </template>
      </div>

      <div
        class="ZMD2"
        style="position: absolute;top: 105px;left: 262px;width: 735px;height: 100px;"
      >
        <template>
          <el-carousel
            indicator-position="none"
            :interval="5000"
            height="283px"
            arrow="always"
            :autoplay="false"
            ref="carousel"
          >
            <el-carousel-item
              v-for="item in banners"
              :key="item.id"
            >
              <img
                :src="item.imageUrl"
                alt=""
                style="width:100%;height:100%;"
              >
            </el-carousel-item>
          </el-carousel>
        </template>

      </div>
    </div>
    <a class="xiazai">

    </a>
    <a
      href="https://music.163.com/#/download"
      class="xiazaiTao"
    >

    </a>
    <div
      class="mid-main"
      style="width:980px;height:1690px;background:#fff;margin:0 auto;"
    >
      <div
        class="left"
        style="float:left;padding-left:5px;border:1px solid #ccc;padding-bottom:35px"
      >
        <div
          class="hotTJ"
          style="width:729px;height:523px;background:#fff;padding-top:15px"
        >
          <hotTJ></hotTJ>
        </div>
        <div
          class="selfdom"
          style="width:729px;height:305px;background:#fff"
        >
          <selfdom></selfdom>
        </div>
        <div
          class="newDie"
          style="width:729px;height:243px;background:#fff"
        >
          <newDie></newDie>
          <div style="clear:both"></div>
        </div>
        <div
          class="list"
          style="width:729px;height:527px;background:#fff;margin-top:40px"
        >
          <list></list>
        </div>
      </div>
      <div
        class="rightTao"
        style="width:242px;height:1688px;background:#fff;float:left;border:1px solid #ccc"
      >
        <div class="right">
          <right></right>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import hotTJ from "./hotTJ/index"
import selfdom from './selfdom/index'
import newDie from './newDie/index'
import list from './list/index'
import right from './right/index'
export default {
  data: () => ({
    banners:[],
    x:0,
    imgSrc:""
  }),
  created() {
    this.postLunbo()
  },
  methods: {
    setActiveItem:function(index){
      if(index==5){
        this.$refs.carousel.setActiveItem(5)
      }
    },
    //获取轮播图的接口
    async postLunbo(){
      try {
        const data=await this.Api.cyzApi.postLunbo()
        // console.log(data.data.banners)
        this.banners=data.data.banners
      } catch (error) {
        alert("请求轮播图数据失败"+error)
      }
    },
    //轮播图与背景图双向绑定
    LBTchange(x,y){
      this.$refs.carousel.setActiveItem(x)
    }
  },
  components:{
    hotTJ,
    selfdom,
    newDie,
    list,
    right
  }
};
</script>
<style lang="less">
.recommend{
  .wapper{
    cursor: pointer;
      position: fixed;
      top: 600px;
      z-index: 100000000;
      right: 115px;
      width: 50px;
      height: 50px;
      background: red;
    }
  .lunbo{
    // background-image: url('../../../assets/cyzimgs/6.jpg');
    background-size: 100% 150%;
    width: 100%;
    height: 283px;
    overflow: hidden;
      .ZMD1{
        .el-carousel__button{
          position: relative;
          z-index: 50000000;
          width: 30px;
          height: 30px;
          background: red;
        }
        .el-carousel__arrow--left{
          width: 37px;
          height: 63px;
          font-size: 46px;
          opacity: 0.6;
          background: none;
          color: #fff;
          text-indent: -1px;
          border-radius: 0%;
          left: 200px;
        }
        .el-carousel__arrow--left:hover{
          background: rgba(7, 0, 0, .25);
        }
       .el-carousel__arrow--right{
          width: 37px;
          height: 63px;
          font-size: 46px;
          opacity: 0.6;
          background: none;
          color: #fff;
          text-indent: -1px;
          border-radius: 0%;
          right: 200px;
        }
        .el-carousel__arrow--right:hover{
          background: rgba(7, 0, 0, .25);
        }
      }
    .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  .ZMD2{
    .el-carousel__arrow--left{
      left:80px;
      display: none;
    }
    .el-carousel__arrow--right{
      left:80px;
      display: none;
    }
    .el-carousel__button{
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
  }
  }
  .xiazai{
    display: block;
    position: absolute;
    top: 105px;
    right: 278px;
    z-index: 700;
    width: 245px;
    height: 283px;
    background: url('../../../assets/cyzimgs/xiazai.png');
  }
  .xiazaiTao{
    display: block;
    position: absolute;
    top: 290px;
    right: 288px;
    z-index: 700;
    width: 215px;
    height: 55px;
    cursor: pointer;
  }
  .xiazaiTao:hover{
    background: url('../../../assets/cyzimgs/xiazai.png');
    background: url('../../../assets/cyzimgs/xiazai.png');
    background-position: 0px -289px;
    cursor: pointer;
  }
}
</style>
